const path = require('path');
const os = require('os');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');

const threads = os.cpus().length;
console.log(threads, 'threads');
// 获取处理样式的loader
function getStyleLoader(pre) {
  return [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            'postcss-preset-env'
          ]
        }
      }
    },
    pre
  ].filter(Boolean)
}
module.exports = {
  // 入口 || 多入口
  mode: 'production', // 或者 'production'
  devtool: 'source-map', //production环境配置sourceMap

  entry: {
    main: "./src/index.js",
  },
  module: {
    rules: [{
      oneOf: [
        {
          test: /\.css$/,
          use: getStyleLoader(),
        },
        {
          test: /\.less$/,
          // 执行顺序 从右到左 从下到上
          use: getStyleLoader('less-loader'),

        },
        {
          test: /\.s[ac]ss$/,
          // 执行顺序 从右到左 从下到上
          use: getStyleLoader('sass-loader'),

        },
        {
          // 会转base64
          test: /\.(png|jpe?g|gif|webp|svg)$/,
          type: 'asset',
          parser: {
            dataUrlCondition: {
              // 小于nkb的图片转base64  不需要使用file-loader和url-loader 
              maxSize: 2 * 1024
            }
          },
          generator: {
            filename: 'images/[hash:10][ext]'
          }
        },
        {
          // 不会转base64
          test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
          type: 'asset/resource',
          parser: {
            dataUrlCondition: {
              // 小于nkb的图片转base64  不需要使用file-loader和url-loader
              maxSize: 2 * 1024
            }
          },
          generator: {
            filename: 'fonts/[hash:10][ext]'
          }
        },
        {
          test: /\.js$/,
          include: path.resolve(__dirname, '../src'),
          use: [
            {
              loader: 'thread-loader',// 开启多进程
              options: {
                Worker: threads // 开启进程数量
              }
            },
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
                cacheCompression: false
              },

            },
          ]
        },
      ]
    }

    ]
  },
  plugins: [new HtmlWebpackPlugin(
    {
      // html模板
      template: path.resolve(__dirname, '../src/index.html')
    }
  ), new MiniCssExtractPlugin(
    {
      filename: 'css/[name].[contenthash:10].css',
      chunkFilename: 'css/[name].[contenthash:10].chunk.css'
    }
  ),
  ],
  optimization: {
    // 放置压缩操作
    minimizer: [
      new CssMinimizerPlugin(),
      new TerserWebpackPlugin({
        parallel: threads,
      }),
      new WorkboxPlugin.GenerateSW({
        // 这些选项帮助快速启用 ServiceWorkers
        // 不允许遗留任何“旧的” ServiceWorkers
        clientsClaim: true,
        skipWaiting: true,
      }),
    ],
    splitChunks: {
      chunks: 'all'
    },
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}.js`
    }
  },
  output: {
    clean: true,
    path: path.resolve(__dirname, '../dist'),
    // 清空上次打包 不需要配置clean-webpack-plugin
    filename: 'js/[name].[contenthash:10].js', // 将 JavaScript 文件打包到 "dist/js" 文件夹中
    chunkFilename: 'js/[name].[contenthash:10].chunk.js'
  }
};


//  14(84) 24(144) 23(138) 25(150) 33(198)